<template>
	<div class="flex justify-between">
		<match-team-logo :home="homeIcon" :away="awayIcon" />
		<div class="mx-1 flex-1 w-1">
			<div class="">
				<match-team-name
					:home="homeTeamName"
					:away="awayTeamName"
					class="text-t-1 leading-[17px] app-font-bold inline" />
				<match-scores
					v-if="outcome"
					:homeScore="homeScore"
					:awayScore="awayScore"
					isResult
					class="ml-1" />
			</div>
			<match-league
				:sportId="sportId"
				:league-id="leagueId"
				:leagueName="leagueName"
				class="text-t-2" />
		</div>
		<div v-if="!outcome" class="flex flex-col items-end text-sm text-t-2">
			<match-time :date="date" />
			<match-date :date="date" />
		</div>
	</div>
</template>

<script lang="ts" setup>
import MatchTeamLogo from '../match-team-logo/index.vue'
import MatchTeamName from '../match-team-name/index.vue'
import MatchLeague from '../match-league/index.vue'
import MatchDate from '../match-date/index.vue'
import MatchTime from '../match-time/index.vue'
import MatchScores from '../match-scores/index.vue'
import { SportsType } from '@/enums'
import { PropType } from 'vue'
defineProps({
	sportId: {
		type: String as PropType<SportsType>
	},
	date: {
		type: [Date, String, Number],
		default: null
	},
	homeIcon: {
		type: String
	},
	awayIcon: {
		type: String
	},
	homeTeamName: {
		type: String,
		default: ''
	},
	awayTeamName: {
		type: String,
		default: ''
	},
	leagueId: {
		type: String,
		default: ''
	},
	leagueName: {
		type: String,
		default: ''
	},
	homeScore: {
		type: [String, Number]
	},
	awayScore: {
		type: [String, Number]
	},
	outcome: {
		type: String,
		default: ''
	}
})
</script>
